<template>
	<view :style="'padding-top:' +mbConfig+'rpx;'" v-if="menus.length">
		<view class='nav acea-row acea-row'
			:style="'background:'+bgColor[0].item+';margin: 0 '+prConfig+'rpx;border-radius:'+bgStyle+'rpx;'">
			<block v-if="rowStyle == 0">
				<scroll-view scroll-x="true" style="white-space: nowrap; display: flex" show-scrollbar="false">
					<view v-for="(item,index) in menus" :key="index" class='item' :style="'color:'+titleColor"
						@click="menusTap(item.info[1].value, index)">
						<view class='pictrue skeleton-rect'>
							<image :src='item.img' :style="'border-radius:'+menuStyle"></image>
						</view>
						<view class="menu-txt" :style="'color:'+(selectId==index?'red':titleColor)+';text-decoration:' + (selectId==index?'underline':'none')">
							{{item.info[0].value}}
						</view>
					</view>
				</scroll-view>
			</block>
			<block v-else v-for="(item,index) in menus" :key="index">
				<view class='item' :style="'color:'+titleColor+';width:'+number"
					@click="menusTap(item.info[1].value, index)">
					<view class='pictrue skeleton-rect'>
						<image :src='item.img' :style="'border-radius:'+menuStyle"></image>
					</view>
					<view class="menu-txt" :style="'color:'+(selectId==index?'red':titleColor)+';text-decoration:' + (selectId==index?'underline':'none')">{{item.info[0].value}}
					</view>
				</view>
			</block>
		</view>

		<view class="index-product-wrapper" :style="{ background: bgColor[0].item, borderRadius: bgStyle+'rpx'}"
			v-if="productList.length">
			<!-- 单列 -->
			<block>
				<view class="list-box animated listA" :class="productList.length > 0 ? 'fadeIn on' : ''">
					<view class="item" v-for="(item, index) in productList" :key="index"
						@click="goDetail(item.product.product_id)">
						<view class="pictrue" :class="'cont'+ Number(bgStyle/16)">
							<easy-loadimage mode="widthFix" :image-src="item.product.image"></easy-loadimage>
							<view v-if="item.product.stock == 0" class="sell_out">已售罄</view>

						</view>
						<view class="text-info"
							style="display: flex; flex-direction: column; justify-content: space-between;">
							<view>
								<view class="title line2">{{ item.product.store_name }}</view>
								<view class="merchant_info">
									<view class="txt delivery">拼单返利</view>
								</view>
							</view>
							<view class="price acea-row" :style="'color:red'">
								<view>
									¥
									<text>{{ item.product.price }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import {
		merPath
	} from "@/utils/index"
	import {
		getRebateProduct,
		getRebateGroup
	} from '@/api/activity'
	export default {
		name: 'rebate',
		props: {
			dataConfig: {
				type: Object,
				default: () => {}
			},
			merId: {}
		},
		data() {
			return {
				menus: this.dataConfig.menuConfig.list,
				bgColor: this.dataConfig.bgColor.color,
				menuStyle: this.dataConfig.menuStyle.type ? '50%' : 0,
				rowStyle: this.dataConfig.tabConfig.tabVal, //0单行1多行
				bgStyle: this.dataConfig.bgStyle.type ? '16' : '0',
				titleColor: this.dataConfig.titleColor.color[0].item,
				mbConfig: this.dataConfig.mbConfig.val * 2,
				prConfig: this.dataConfig.prConfig.val * 2,
				rowNum: this.dataConfig.rowsNum.type, //0两行，1三行，2四行
				number: this.dataConfig.number.type == 0 ? '33.33%' : this.dataConfig.number.type == 1 ? '25%' :
				'20%', //三个四个五个 

				// mbConfig2: this.dataConfig.mbConfig2.val*2,
				// bgStyle2: this.dataConfig.bgStyle2.type ? '20' : '0',

				// tempArr: [],
				// numConfig: this.dataConfig.numConfig.val ? this.dataConfig.numConfig.val : this.dataConfig.numConfig.val,
				// themeColor: this.dataConfig.themeColor.color[0].item,
				// priceColor: this.dataConfig.fontColor.color[0].item,
				// labelColor: this.dataConfig.labelColor.color[0].item,
				// itemStyle: this.dataConfig.itemStyle.type,
				// sortType: this.dataConfig.goodsSort.type,
				// conStyle: this.dataConfig.conStyle.type,
				// type: this.dataConfig.tabConfig.tabVal || 0,
				// selectId: this.dataConfig.selectConfig.activeValue || 0,
				// titleShow: this.dataConfig.titleShow.val,
				// priceShow: this.dataConfig.priceShow.val,
				// couponShow: this.dataConfig.couponShow.val,
				// diy_id: this.dataConfig.did,
				// unique: this.dataConfig.timestamp,

				// productIds: this.dataConfig.goodsList.ids || [],

				isCreating: false,
				groupList: [],
				productList: [],
				groupId: 0,
				selectId: 0,
			};
		},
		created() {

		},
		mounted() {
			this.menusTap(this.menus[0].info[1].value);
		},
		methods: {
			goDetail(id) {
				uni.navigateTo({
					url: `/pages/other/goods_details/index?id=${id}`
				});
			},
			// 切换分组
			menusTap(id, index = 0) {
				// console.log(id, index);
				this.selectId = index;
				return new Promise((resolve, reject) => {
					getRebateProduct(id)
						.then(result => {
							this.productList = result.data.list
							resolve(result)
						})
						.catch(reject)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		padding: 30rpx 0 0;

		.item {
			width: 20%;
			text-align: center;
			font-size: 24rpx;
			display: inline-block;
			margin-bottom: 20rpx;

			.pictrue,
			/deep/.pictrue image,
			/deep/.pictrue .easy-loadimage,
			/deep/.pictrue uni-image {
				width: 82rpx;
				height: 82rpx;
				margin: 0 auto;
			}

			.menu-txt {
				font-size: 28rpx;
				color: #454545;
				margin-top: 15rpx;
				font-weight: bold;
			}

			&.four {
				width: 25%;

				.pictrue {
					width: 90rpx;
					height: 90rpx;
				}
			}
		}
	}

	.index-product-wrapper {
		margin: 5rpx 0;
		padding: 20rpx 20rpx 0;

		.list-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.item {
				width: 328rpx;
				margin-bottom: 20rpx;
				overflow: hidden;
				position: relative;

				&.on {
					border-radius: 0;
				}

				.pictrue_log {
					width: 92rpx;
					height: 44rpx;
					font-size: 26rpx;
					line-height: 44rpx;
				}

				.pictrue,
				/deep/image,
				/deep/.easy-loadimage,
				/deep/uni-image {
					width: 100%;
					display: block;
					position: relative;

					.border-picture {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						background: center/cover no-repeat;
					}
				}

				.picture1,
				/deep/.picture1 image,
				/deep/.picture1 .easy-loadimage,
				/deep/.picture1 uni-image {
					height: 346rpx;
					position: relative;

					.border-picture {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						background: center/cover no-repeat;
					}

					.sell_out {
						display: flex;
						width: 150rpx;
						height: 150rpx;
						align-items: center;
						justify-content: center;
						border-radius: 100%;
						background: rgba(0, 0, 0, .6);
						color: #fff;
						font-size: 30rpx;
						position: absolute;
						top: 50%;
						left: 50%;
						margin: -75rpx 0 0 -75rpx;

						&::before {
							content: "";
							display: block;
							width: 140rpx;
							height: 140rpx;
							border-radius: 100%;
							border: 1px dashed #fff;
							position: absolute;
							top: 5rpx;
							left: 5rpx;
						}
					}
				}

				.cont1,
				/deep/.cont1 image,
				/deep/.cont1 .easy-loadimage,
				/deep/.cont1 uni-image,
				.cont1 .border-picture {
					border-radius: 16rpx;
				}

				.text-info {
					padding: 10rpx 20rpx 15rpx;

					.title {
						color: #222222;
					}

					.old-price {
						margin-top: 4rpx;
						font-size: 26rpx;
						color: #999;
						text-decoration: line-through;

						text {
							margin-right: 2px;
							font-size: 20rpx;
						}
					}

					.price {
						display: flex;
						margin-top: 20rpx;
						font-size: 26rpx;
						align-items: center;

						text {
							font-size: 36rpx;
							font-weight: 550;
						}

						.ot-price {
							color: #aaa;
							font-size: 26rpx;
							text-decoration: line-through;
							margin-left: 6rpx;
							font-weight: normal;
							margin-top: 10rpx;
						}
					}
				}

				.pictrue {
					position: relative;
				}

				.border-picture {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
					background: center/cover no-repeat;
				}
			}

			.merchant_info {
				display: flex;
				align-items: center;
				margin-top: 20rpx;

				.merchant_type {
					color: #fff;
					line-height: 30rpx;
					padding: 0 10rpx;
					border-radius: 2rpx;
					font-size: 22rpx;
				}

				.txt {
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0 4rpx;
					height: 28rpx;
					margin-left: 15rpx;
					border: 1px solid $theme-color;
					border-radius: 4rpx;
					font-size: 20rpx;
					font-weight: normal;

					&.delivery {
						color: #FF9000;
						border-color: #FF9000;
					}
				}
			}

			&.on {
				display: flex;
			}

			&.listA {
				.item {
					display: flex;
					width: 100%;

					.pictrue,
					/deep/image,
					/deep/.easy-loadimage,
					/deep/uni-image {
						width: 220rpx;
						height: 220rpx;
					}

					.sell_out {
						display: flex;
						width: 110rpx;
						height: 110rpx;
						align-items: center;
						justify-content: center;
						border-radius: 100%;
						background: rgba(0, 0, 0, .6);
						color: #fff;
						font-size: 24rpx;
						position: absolute;
						top: 50%;
						left: 50%;
						margin: -55rpx 0 0 -55rpx;

						&::before {
							content: "";
							display: block;
							width: 100rpx;
							height: 100rpx;
							border-radius: 100%;
							border: 1px dashed #fff;
							position: absolute;
							top: 5rpx;
							left: 5rpx;
						}
					}

					.text-info {
						width: 490rpx;
					}
				}
			}

			&.listB {
				justify-content: inherit;

				.item {
					width: 31.3%;
					margin-right: 3.05%;

					.pictrue,
					/deep/image,
					/deep/.easy-loadimage,
					/deep/uni-image {
						height: 220rpx;
					}

					.sell_out {
						display: flex;
						width: 110rpx;
						height: 110rpx;
						align-items: center;
						justify-content: center;
						border-radius: 100%;
						background: rgba(0, 0, 0, .6);
						color: #fff;
						font-size: 24rpx;
						position: absolute;
						top: 50%;
						left: 50%;
						margin: -55rpx 0 0 -55rpx;

						&::before {
							content: "";
							display: block;
							width: 100rpx;
							height: 100rpx;
							border-radius: 100%;
							border: 1px dashed #fff;
							position: absolute;
							top: 5rpx;
							left: 5rpx;
						}
					}

					&:nth-child(3n) {
						margin-right: 0;
					}

					.price {
						font-size: 20rpx;

						text {
							font-size: 28rpx;
						}
					}

					.text-info {
						padding: 10rpx 4rpx;
					}
				}
			}

			&.listC {
				.item {
					width: 100%;

					.pictrue,
					/deep/image,
					/deep/.easy-loadimage,
					/deep/uni-image {
						height: 320rpx;
					}

					.price {
						margin-top: 20rpx;
						font-size: 40rpx;
						display: flex;
						align-items: center;

						.old-price {
							font-weight: normal;
							font-size: 22rpx;
							margin-left: 10rpx;
						}
					}
				}
			}

			&.listS {
				.item {
					background: #ffffff;
				}

				.price {
					font-size: 40rpx;
					display: flex;
					align-items: baseline;

					.old-price {
						font-weight: normal;
						font-size: 22rpx;
						margin-left: 10rpx;
					}
				}

				.cont1,
				/deep/.cont1 image,
				/deep/.cont1 .easy-loadimage,
				/deep/.cont1 uni-image,
				.cont1 .border-picture {
					border-radius: 16rpx 16rpx 0 0;
				}

				.bg1 {
					border-radius: 16rpx;
				}
			}
		}
	}

	.underlineBox {
		height: 3px;
		width: 20%;
		display: flex;
		align-content: center;
		justify-content: center;
		transition: .5s;

		.underline {
			width: 33rpx;
			height: 4rpx;
			background-color: white;
		}
	}
</style>